<template>
  <div class="home">
	 <header :class="isTop?'active':''"></header>
	<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
	  <van-swipe-item v-for='item in carousels'  :key='item.carouselUrl'>
		  <img :src="item.carouselUrl" alt="">
	  </van-swipe-item>
	</van-swipe>
	
	<van-grid :column-num="5" :border="false">
	  <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字"/>
	</van-grid>
	
	<Goods :datacontent="hotGoodses">
		<template #title>
			新品上线
		</template>
	</Goods>
	<Goods :datacontent="newGoodses">
		<template #title>
			热销商品
		</template>
	</Goods>
	<Goods :datacontent="recommendGoodses">
		<template #title>
			推荐
		</template>
		<template #default="options">
			<div class="goods_desc">
				<span>{{options.goods_item.sellingPrice | curreny}}</span>
				<p>{{options.goods_item.goodsName}}</p>
			</div>
		</template>
	</Goods>
	
  </div>
</template>

<script>
import {test,getIndexInfo} from "../api/index.js"

export default {
  name: 'Home',
  data(){
	  return {
		  isTop:false,
		  carousels:[],
		  hotGoodses:[],
		  newGoodses:[],
		  recommendGoodses:[]
	  }
  },
  created(){
	 //test();
	 this.getData();
  },
  methods:{
	 changeTop(){
		 let html=document.documentElement||document.body;
		 if(html.scrollTop>50){
		 	this.isTop=true;
		 }else{
		 	this.isTop=false;
		 }
	 },
	 getData(){
		getIndexInfo().then((data)=>{
			//console.log(data);
			if(data.resultCode==200){
				this.carousels=data.data.carousels;
				this.hotGoodses=data.data.hotGoodses;
				this.newGoodses=data.data.newGoodses;
				this.recommendGoodses=data.data.recommendGoodses;
			}
		})
	 }
  },
  mounted(){
	  window.addEventListener("scroll",this.changeTop);
  },
  destroyed(){
	  window.removeEventListener("scroll",this.changeTop);
  }
}
</script>
<style lang="less" scoped="scoped">
	.home{
		background-color: #eee;
		header{
				height:55px;
				width:100%;
				background-color: #ccc;
				opacity: 0.5;
				position: fixed;
				left:0;
				top:0;
				z-index:999;
			}
			header.active{
				background-color: #168B8B;
				opacity: 1;
			}
			.my-swipe .van-swipe-item {
				img{
					width: 100%;
					height: auto;
				}
		}
		padding-bottom: 80px;
	}
</style>
